<template>
    <van-nav-bar title="我的投资" left-arrow @click-left="onClickLeft" :fixed="true" />
    <div class="vannavbar"></div>
    <div class="myinvestment">
        <div class="myinvestment_total">
            <div class="int">
                <p> 总投资 </p>
                <h5> {{MemberExt.PropertyAmounts||0}} </h5>
            </div>
            <div class="int">
                <p style="text-align: right;"> 总收益 </p>
                <h2> {{MemberExt.BonusAmounts||0 + MemberExt.CommissionAmounts||0}} </h2>
            </div>
        </div>
        <van-list v-model="loading" :finished="finished" finished-text="已经到底了哦" @load="onLoad">
            <div class="myinvestment_tabel">
                <div class="int" :key="index" v-for="(Item, index) in OrderList" v-if="OrderList.length>0">
                    <h5 class="titel"> {{Item.ProductName}} </h5>
                    <div class="center">
                        <div class="img">
                            <img :src="Item.Picture" alt="">
                        </div>
                        <div class="tabel">
                            <div class="li"> 投资日期：<span> {{Item.CreateTime.substring(0,10)}} </span> </div>
                            <div class="li"> 投资金额：<span> ¥ {{Item.PayAmount}} </span> </div>
                            <div class="li"> 收益金额：<span> ¥ <a>{{Item.ReleaseTotalAmount||0}}</a> </span> </div>
                        </div>
                    </div>
                </div>
                <div class="vanEmpty" v-else>
                    <van-empty description="暂无数据" />
                </div>
            </div>
        </van-list>
    </div>
</template>

<script>
    import { onMounted, reactive, ref, toRefs } from 'vue'
    import { Toast, Notify } from 'vant';
    import { useStore } from "vuex"; // ⚪️ 引入状态管理
    import { useRoute, useRouter } from "vue-router";
    import router from "@/router";
    import { GetMemberExt } from "@/network/user";
    import { GetOrderList } from "@/network/order";
    import {
        getToken,
        setToken,
        removeToken
    } from "@/utils/auth";
    export default {
        setup() {
            const store = useStore(); // 获取对象
            const state = reactive({
                token: store.state.user.token,
                MemberExt: {},
                OrderList: [],
                loading: false,
                finished: false,
                pageSize: 6,
                currentPage: 1,
                Total: 0,
            });
            onMounted(() => {
                init();
            });
            const onLoad = () => {
                if (state.OrderList.length == state.Total) {
                    if (state.OrderList.length != 0) {
                        state.loading = false
                        state.finished = true
                    }
                } else {
                    state.currentPage = parseInt(state.currentPage) + 1;
                    GetOrder();
                }
            }
            // 初始化信息
            const init = () => {
                // GetMemberExt
                GetMemberExt({
                    Id: state.token.ID
                }).then((res) => {
                    var data = res.Data;
                    state.MemberExt = data
                });
                GetOrder();
            };
            const GetOrder = () => {
                // const toast = Toast.loading({
                //     duration: 0,
                //     forbidClick: true,
                //     message: '订单列表获取中...',
                // });
                var params = {
                    memberId: state.token.ID,
                    pageSize: state.pageSize,
                    currentPage: state.currentPage
                }
                GetOrderList(params).then((res) => {
                    if (res.Code == 0) {
                        var data = res.Data;
                        state.Total = res.Pager.Total
                        if (data.length > 0) {
                            data.forEach(element => {
                                state.OrderList.push(element)
                            });
                        } else {
                            // state.loading = false
                            state.finished = true
                        }
                    } else { }
                    // toast.clear()
                });
            }
            const onClickLeft  = () => {
                router.push({ path: "/my" });
            };
            return {
                ...toRefs(state),
                onClickLeft,
                onLoad
            };
        },
    };
</script>

<style scoped>

</style>